{extend name="main"}
{block name="style"}
<style>
    .special-header {
        min-height: 400px;
        background-image: url(__TEMPLATE_STATIC__/job_fair_bg.png);
        background-repeat: no-repeat;
        background-position-x: center;
        background-size: 100% 400px;
        background-color: #F8F8F8;
        padding-top: 190px;
    }

    .el-select .el-input {
        width: 120px;
    }

    .icon-special-status {
        position: absolute;
        z-index: 1;
        background: linear-gradient(-30deg, #FF939D, #FF3131);
        border-radius: 0px 13px 13px 0px;
        color: #FFFFFF;
        font-size: .8rem;
        top: 0;
        padding: 0 6px;
    }

    .icon-special-status.status-info {
        background: linear-gradient(-30deg, #C1C1C1, #999A9B);
    }
</style>
{/block}

{block name="header"}
{include file="module/top_nav" container="container-xl"/}
{include file="module/header_concise"/}
{/block}

{block name="body"}
<div class="special-header">
    <h1 class="text-center text-white pb-5">专题招聘</h1>
    <div class="container-xl pt-2">
        <div class="text-center text-dark pb-5 search mb-3">
            <el-form @submit.native.prevent="sendSearch">
                <el-input placeholder="会计/财务/人力/客服/设计…" v-model="search.key"
                    class="w-75 input-with-select shadow el-input__inner-left-none" clearable>
                    <el-button native-type="submit" slot="append">搜索</el-button>
                </el-input>
            </el-form>
        </div>
    </div>
</div>
<div class="container-xl">
    <div class="row" style="margin-left: -0.5rem;margin-right: -0.5rem;">
        {volist name="special" id="v"}
        <div class="col-4 mb-3 px-2">
            <div class="bg-white p-3">
                <div class="position-relative">
                    <a href="/special/details/{$v.id}.html">
                        <img src="{$v.pc_thumb}" alt="" width="100%" height="120">
                    </a>
                    {eq name='v.status' value='1'}
                    <div class="icon-special-status">进行中</div>
                    {else/}
                    <div class="icon-special-status status-info">已结束</div>
                    {/eq}
                </div>
                <div class="pt-3">
                    <a href="/special/details/{$v.id}.html" class="h6 d-block text-truncate text-dark font-weight-600"
                        target="_blank">{$v.title}</a>
                    <div class="flex flex-ceter text-grey">
                        <div class="small">{:date('Y/m/d H:i',$v.start_time);}</div>
                        <div class="small px-1">至</div>
                        <div class="small">{:date('Y/m/d H:i',$v.end_time);}</div>
                        <div class="flex-1"></div>
                        <a href="/special/details/{$v.id}.html" class="small text-grey" target="_blank">查看详情</a>
                    </div>
                </div>
            </div>
        </div>
        {/volist}
    </div>
</div>
{/block}
{block name="footer"}
{include file="module/footer"/}
<!-- {include file="module/login"/} -->
{/block}
{block name="script"}
<script>
    var topic = JSON.parse('{:json_encode($special)}'.replace(/[\r\n\s+]/g, '\\n'));
</script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            view: XYBase.view,
            loginTabs: XYBase.loginTabs,
            userInfo: UserInfo,
            feedback: XYBase.feedback,
            confirm: 0,
            search: {
                key: ''
            }
        },
        watch: {
            view: XYBase.viewWatch,
            loginTabs: XYBase.loginTabsWatch,
        },
        created() {
            XYBase.created(this);
        },
        methods: XYBase.methods({
            sendSearch() {
                window.location.href = '?title=' + this.search.key;
            }
        })
    });
</script>
{/block}